<template>
  <div class="app-container">
    <div class="form-container">
      <el-form label-width="120" :model="form" ref="refForm" :rules="rules">
        <el-form-item label="配送员姓名" prop="fullName">
          <el-input placeholder="请输入配送员姓名" v-model="form.fullName"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input placeholder="请输入手机号" v-model="form.phonenumber"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="smsCode">
          <el-input v-model="form.smsCode" placeholder="请输入验证码"></el-input>
          <span class="sms-code"
            ><el-button type="text" :disabled="codeTime > 0" @click="handleGetSmsCode">{{
              codeTime > 0 ? `${codeTime}秒后重新获取` : "获取验证码"
            }}</el-button></span
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-container">
      <el-button type="primary" size="default">取消</el-button>
      <el-button type="primary" size="default" @click="handleSubmit(refForm as FormInstance)">确定添加</el-button>
    </div>
  </div>
</template>
<script lang="tsx" setup name="CarTypeForm">
import { Delivery } from "@/api/interface/city/organizationManage";
import { addDeliveryAPI } from "@/api/modules/city/organizationAPI";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const codeTime = ref<number>(0);
const refForm = ref<FormInstance>();
const rules = ref<FormRules>({
  phonenumber: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur"
    }
  ],
  fullName: [
    {
      required: true,
      message: "请输入配送员姓名",
      trigger: "blur"
    }
  ],
  smsCode: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur"
    }
  ]
});
let form = ref<Delivery.AddParams>({
  phonenumber: "",
  fullName: "",
  smsCode: "",
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  city: JSON.parse(localStorage.getItem("userInfo") as string).city
});
const handleGetSmsCode = (): void => {
  codeTime.value = 60;
  let timer = setInterval(() => {
    codeTime.value--;
    if (codeTime.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};
const handleSubmit = (formEl: FormInstance) => {
  formEl.validate(valid => {
    if (valid) {
      addDelivery();
    } else {
      ElMessage.error("请填写正确的信息");
    }
  });
};
const addDelivery = async (): Promise<void> => {
  const { code, msg } = await addDeliveryAPI(form.value);
  if (code == "200") {
    ElMessage.success("添加成功");
    router.push({ path: "cityLevel/cityOrganization/cityDelivery/registNew" });
  } else {
    ElMessage.error(msg);
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 10px;
  background-color: white;
  .form-container {
    box-sizing: border-box;
    width: 60%;
    padding: 10px;
    margin: 0 auto;
    .form-title {
      margin-bottom: 15px;
      margin-left: 25px;
      .title-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: white;
        text-align: center;
        vertical-align: middle;
        background-color: #009688;
        border-radius: 50%;
      }
    }
    .sms-code {
      //   float: right;
      position: absolute;
      right: 5px;
      display: inline-block;
    }
  }
  .btn-container {
    margin-top: 20px;
    text-align: center;
  }
}
::v-deep .el-col {
  padding-right: 10px;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
</style>
